import StackBlitzkSDK from '@stackblitz/sdk';
import { Injectable } from '@angular/core';
import { Project } from '@stackblitz/sdk';

interface StackBlitzExampleConfig {
  code: string;
  language: string;
  html?: string;
  dependencies: {
    [name: string]: string;
  };
}

@Injectable({
  providedIn: 'root',
})
export class StackblitzService {
  openProject(config: StackBlitzExampleConfig) {
    const codeExtension: 'js' | string =
      {
        ts: 'ts',
        typescript: 'ts',
      }[config.language] || 'js';

    const template: Project['template'] = codeExtension === 'ts' ? 'typescript' : 'javascript';

    StackBlitzkSDK.openProject(
      {
        files: {
          'index.html': config.html || '',
          [`index.${codeExtension}`]: config.code,
        },
        title: 'RxJS example',
        description: 'RxJS example',
        template,
        tags: ['rxjs', 'demo'],
        dependencies: config.dependencies,
        settings: {
          compile: {
            trigger: 'auto',
            action: 'refresh',
            clearConsole: true,
          },
        },
      },
      {
        devToolsHeight: 50,
      }
    );
  }
}
